<!--  -->
<template>
	<div>
		<cu-custom :needBack="true" bgColor="bgNormal" topTitle="专家管理" titleClass="commTitleWhite"
			backIconColor="#fff"></cu-custom>
		<view class="header">
			<view class="search">
				<u-search placeholder="请输入组名称" v-model="form.name" @change="doSearch" :show-action="false"></u-search>
			</view>
			<u-button @click="addOrUpGroup" class="add-btn" type="success" size="mini">新增</u-button>
		</view>
		<scroll-view class="scroll_content" scroll-y :style="{ height: getHeight() }" @scrolltolower="loadMore">
			<view class="meterials-list">
				<view class="meterials" v-for="item in dataList" :key="item.id">
					<view class="name">{{item.name || '--'}}</view>
					
					<view class="cell">
						<view class="cell-title">组长：</view>
						<view class="tags">
							<view>{{ getGroupLeader(item.members, 1) }}</view>
						</view>
					</view>
					
					<view class="cell">
						<view class="cell-title">组员：</view>
						<view class="tags">
							<view>{{ getGroupLeader(item.members, 0) }}</view>
						</view>
					</view>
					
					<view class="cell">
						<view class="cell-title">申报组织：</view>
						<view class="tags">
							<view v-if="item.declarationInfos.length == 0">--</view>
							<view v-for="org in item.declarationInfos" class="tag">
								<u-tag :text="org.userName"  size="mini" mode="light" bg-color="#e6f7ff" color="#1890ff" border-color="#1890ff"/>
							</view>
						</view>
					</view>
					<view class="btn-box">
						<u-button @click="addOrUpGroup(item)" class="btn" type="primary" size="mini" plain>编辑</u-button>
						<u-button @click="upApplyOrg(item)" class="btn" type="primary" size="mini" plain>分配申报组织</u-button>
						<u-button @click="delGroup(item)" class="btn" type="error" size="mini" plain>删除</u-button>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 30rpx;"></view>
			<u-loadmore :status="status" :load-text="loadText"></u-loadmore>
		</scroll-view>
	</div>
</template>

<script>
	import { expertGroupPage, delExpertGroup } from "@/api/expertManager.js";
	export default {
		data() {
			return {
				form: {
					size: 20,
					current: 1,
					name: ''
				},
				total: 0,
				loadText: {
					loadmore: "加载更多",
					loading: "加载中",
					nomore: "没有更多了",
				},
				dataList: [],
				status: "loadmore",
				timeout: null
			};
		},
		mounted() {
		
		},
		async onShow() {
			this.loadExpertManList()
		},
		methods: {
			
			doSearch() {
				clearTimeout(this.timeout)
				this.timeout = setTimeout(() => {
					this.form.current = 1
					this.loadExpertManList()
				}, 800)
			},
			clearKeyword() {
				console.log('clear');
				console.log(this.form);
			},
			getGroupLeader(data = [], leaderFlag = 1) {
				let leader = ''
				if (data && data.length > 0) {
					leader = data.filter(v => v.leaderFlag == leaderFlag).map(v => v.nickName).join(",")
				}
				console.log('here', data);
				console.log('leader', leader);
				return leader || '--'
			},
			getHeight() {
				return `calc(100vh - ${this.CustomBar}px - 125rpx)`;
			},
			loadExpertManList() {
				expertGroupPage(this.form).then((res) => {
					if (res.code == 200) {
						this.total = res.data.total
						if (res.data.total > 20) {
							this.dataList = this.dataList.concat(res.data.records || []); //合并数组
						} else {
							this.dataList = res.data.records || []
							this.status = 'nomore'
						}
					}
				});
			},
			addOrUpGroup(item) {
				let expertId = item?.id || ''
				uni.navigateTo({
				  url: '/packageB/expertManager/addUpGroup?expertId=' + expertId
				})
			},
			// 分配申报组织
			upApplyOrg(item) {
				let expertId = item?.id || ''
				let targetIds = item.targetRecordIds
				uni.navigateTo({
				  url: `/packageB/expertManager/upApplyOrg?expertId=${expertId}&targetIds=${targetIds}`
				})
			},
			// 删除分组
			delGroup(item) {
				uni.showModal({
				  title: "提示",
				  content: "是否确认删除当前数据?",
				  confirmText: "确定",
				  success: (res) => {
				    if (res.confirm) {
							delExpertGroup({ id: item.id }).then(res => {
								if (res.code == 200) {
									uni.showToast({ title: "删除成功", on: "none" })
									this.form.current = 1
									this.loadExpertManList()
								}
							})
				    } else if (res.cancel) {
				      console.log("用户点击取消");
				    }
				  },
				});
			},
			// 加载更多
			loadMore() {
				console.log("到底了");
				if (this.total > this.form.current * this.form.size) {
					this.status = "loading";
					this.form.current++;
					this.loadExpertManList();
				} else {
					this.status = "nomore";
				}
			},
			// 详情
			toDetail(data) {
				//整个申报记录id
				uni.setStorageSync("currentReportId",data.id)
				uni.setStorageSync("currentDeclarationSystemId",data.declarationSystemId)
				//当前申报记录的组织类型id
				uni.setStorageSync("currentSocialOrganizationTypeId",data.socialOrganizationTypeId)
				console.log(data)
				uni.navigateTo({
					url: `/packageB/applicationMaterials/detail?id=${data.id}`,
				});
			},
		}
	};
</script>
<style lang='scss' scoped>
	.header {
		padding: 25rpx 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #efefef;
		display: flex;
		align-items: center;
		.search {
			flex: 1;
		}
		.add-btn {
			margin-left: 20rpx;
		}
	}
	.scroll_content {
		.meterials-list {
			padding: 30rpx 30rpx 0;
			.meterials {
				background: #ffffff;
				border-radius: 8rpx;
				padding: 25rpx;
				margin-bottom: 30rpx;
				.name {
					display: block;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}
				.cell {
					display: flex;
					margin-bottom: 20rpx;
					.cell-title {
						font-size: 26rpx;
						color: #999999;
					}
					.tags {
						flex: 1;
						font-size: 26rpx;
						color: #333333;
						display: flex;
						flex-wrap: wrap;
						.tag {
							margin: 0 8rpx 8rpx 0;
						}
					}
				}
				.btn-box {
					text-align: right;
					.btn {
						margin-left: 15rpx;
					}
				}
			}
		}
	}
</style>